<template>
  <div>
    <!-- 玩具用品 -->
    <div
      class="sub-hot-icon"
      style="background: url('/dian-ico.png') repeat-x center"
    >
      <h3>热门品牌</h3>
    </div>
    <div class="sub-module">
      <router-link to="/">
        <div class="mod-child">
          <div>
            <img src="/shop01.jpg" />
          </div>
          <div>
            <p>简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</p>
            <span>￥43.00</span>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.sub-hot-icon {
  overflow: hidden;
  width: 100%;
  text-align: center;
  margin: 5px 0 20px;
  > h3 {
    display: inline;
    font-size: 21px;
    background-color: #faf8e4;
    color: #555;
    padding: 0 50px;
  }
}
.sub-module {
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-decoration: none;
  > a {
    text-decoration: none;
    .mod-child {
      width: 225px;
      height: 280px;
      background-color: #fefefe;
      padding-bottom: 15px;
      > :first-child {
        height: 200px;
        overflow: hidden;
        padding-top: 15px;
      }
      > div {
        margin: 0 auto;
        width: 195px;
        > img {
          width: 100%;
          height: 100%;
        }
        > p {
          margin: 5px 0 7px;
          font-size: 13px;
          color: #3e3e46;
        }
        > span {
          font-weight: 900;
          font-size: 18px;
          color: red;
        }
      }
    }
  }
  a:hover {
    box-shadow: 0 7px 7px 0 red;
    transition: 0.4s;
    transform: translateY(-8px);
  }
}
</style>
